<template>
  <div class="loan-process-table-container">
    <div class="table-container">
      <a-table
        :columns="columns"
        :data-source="[data]"
        bordered
        :pagination="false"
      >
        <template #duedate="text">
          <span>{{ text | dateFormat('DD/MM/YYYY') }}</span>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
const customRenderMoney = (text) => (text ? `$ ${text}` : '/');

const columns = [
  {
    title: '到期日',
    dataIndex: 'duedate',
    align: 'center',
    scopedSlots: { customRender: 'duedate' }
  },
  {
    title: '本金',
    dataIndex: 'principal',
    align: 'center',
    customRender: customRenderMoney
  },
  {
    title: '利息',
    dataIndex: 'interest',
    align: 'center',
    customRender: customRenderMoney
  },
  {
    title: '滞纳金',
    dataIndex: 'late_fee',
    align: 'center',
    customRender: customRenderMoney
  },
  {
    title: '手续费',
    dataIndex: 'charges',
    align: 'center',
    customRender: customRenderMoney
  },
  {
    title: '支付卡',
    dataIndex: 'paymentcard',
    align: 'center'
  }
];

export default {

  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      columns
    };
  }
};
</script>

<style lang="scss">
.loan-process-table-container {
  .table-container {
    .ant-table {
      min-height: auto!important;
    }
  }
}
</style>
